<template>
  <el-config-provider
    :size="globalConfig?.size"
    :locale="zhCn"
    :message="{ max: globalConfig?.maxMessageCount }"
  >
    <router-view />
  </el-config-provider>
</template>

<script setup>
import {
  addThemeClass,
  changeWeakOrGreyMode,
  changeAsideStyle,
} from './app/style'
import { DARK_THEME, PRIMARY_COLOR_KEY } from './const/theme'
import useConfigStore from './store/modules/config'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'

const configStore = useConfigStore()

const globalConfig = computed(() => configStore.globalConfig)
const isDark = computed(() => configStore.isDark)

onMounted(() => {
  initStyle()
  changeAsideStyle(globalConfig.value.isDarkAside)
})

function initStyle() {
  const config = globalConfig.value

  configStore.setConfig(PRIMARY_COLOR_KEY, config.primaryColor)
  isDark.value && addThemeClass(DARK_THEME)
  config.isWeakMode && changeWeakOrGreyMode('weak', true)
  config.isGreyMode && changeWeakOrGreyMode('grey', true)
  config.isBlur && configStore.addBlurClass(true)

  configStore.changeLayoutHorizontalStyle(config.layout)
}
</script>
